<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Grid布局（IE不支持）</title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box; }

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            min-height: 100%; }

        .container {
			  position: absolute;
			  left: 0;
			  top: 0;
			  width: 100%;
			  height: 100%;
			  display: -ms-grid;
			  display: grid;
			  -ms-grid-columns: (1fr)[12];
			  grid-template-columns: repeat(12, 1fr);
			  -ms-grid-rows: 60px calc(100% - 120px) 60px;
		      grid-template-rows: 60px -webkit-calc(100% - 120px) 60px;
		      grid-template-rows: 60px calc(100% - 120px) 60px;
			  grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f"; }


        @media screen and (max-width: 640px) {
            .container {
                grid-template-areas: "m m m m m m h h h h h h" "c c c c c c c c c c c c" "f f f f f f f f f f f f"; } }

        .header {
            grid-area: h;
            background: #40AFFE;
            color: #ffffff; }

        .menu {
            grid-area: m;
            background: #c2c2c2; }

        .content {
            grid-area: c;
            border: 1px solid; }

        .footer {
            grid-area: f;
            background: black;
            color: #ffffff; }

    </style>
</head>
<body>
<div class="container">
    <div class="header">HEADER</div>
    <div class="menu">MENU</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</div>
</body>
</html>